<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /* 
            箭头函数
            语法:
                函数名(实参) => 返回值
                一个函数 a => 返回值
                多个参数 (a,b) => 返回值

                只有一个语句的函数 () => 返回值
                只返回一个对象的函数 () => ({
                    ...
                })
                有多行语句的函数 () => {
                    .....
                    return 返回值
                }
                箭头函数没有自己的this 它的this由外层作用域来决定
                    箭头函数的this和它的调用方式无关
        */
      // 以函数方法调用
      function fn() {
        console.log('fn-->' + this);
      }
      const fn2 = () => {
        console.log('fn2-->' + this);
      };
      fn();
      fn2();
      // 以方法的形式调用
      const obj = {
        name: 'GGG',
        fn, //效果等于fn:fn
        fn2, //fn2:fn2
        test() {
            // 以什么什么的方法形式调用
          console.log(obj.name);
          const t = () => {
            console.log(this);
          }
          t()
        //   调用t
        //   输出的是test的外部作用域的属性
    }
      };
      obj.fn();
      obj.fn2();
      obj.test();
    </script>
  </head>
  <body></body>
</html>
